<template>
    <el-drawer v-model="drawer" :with-header="false" :size="size" :append-to-body="true" @close="close" class="candidate-detail-drawer" :modal="true" modal-class="candidate-modal">
        <div class="candidate-detail">
            <el-card :body-style="{padding: `10px 0`}" shadow="always">
                <div class="candidate-msg">
                    <el-row>
                        <el-row align="top" style="width:50%" justify="end" class="left-base">
                            <el-avatar :size="60" :src="defaultForm.avatar" shape="square" v-if="defaultForm.state != 7"/>
                            <div v-else style="width: 60px">
                                <el-avatar :size="60" :src="defaultForm.avatar" shape="square"/>
                                <el-tag effect="dark" size="small" style="margin: 3px">已入职</el-tag>
                            </div>
                            <div class="candidate-msg-container">
                                <el-row align="middle" justify="space-between" style="width: 100%">
                                    <div class="row-item">
                                        <span class="candidate-name">{{ defaultForm.name }}</span>
                                        <i class="fa fa-venus pink" v-if="defaultForm.sex === '1'"></i>
                                        <i class="fa fa-mars blue" v-else></i>
                                        <el-divider direction="vertical"/>
                                        <div>
                                            <span>年龄 {{ defaultForm.age ? defaultForm.age + '岁' : '--' }}</span>
                                        </div>
                                    </div>
                                    <el-row align="middle" @click="shareCandidate" class="share-item">
                                        <el-icon style="margin-right:1px;margin-top:1px;" color="var(--el-color-primary)">
                                            <ele-Share/>
                                        </el-icon>
                                        <span class="share-tips">转发</span>
                                    </el-row>
                                </el-row>
                                <el-row style="margin-top:5px;">
                                    <div class="row-item">
                                        <el-icon color="var(--next-color-text-gery)" style="margin-right:5px">
                                            <ele-Cellphone/>
                                        </el-icon>
                                        <span>{{ defaultForm.phone || '--' }}</span>
                                    </div>
                                    <el-divider direction="vertical"/>
                                    <div class="row-item">
                                        <i class="fa fa-envelope" style="color:var(--next-color-text-gery);margin-right:5px;"></i>
                                        <span>{{ defaultForm.email || '--' }}</span>
                                    </div>
                                </el-row>
                                <el-form size="small" style="margin-top:5px;">
                                    <el-form-item label="应聘职位">
                                        <span>{{ defaultForm.recruitPostName || '--' }}</span>
                                        <el-divider direction="vertical"/>
                                        <template v-if="defaultForm.recruitPost">
                                            <span v-if="!defaultForm.recruitPost.type">--</span>
                                            <template v-else v-for="item in dictMap['StaffType']" :key="item.value">
                                                <span v-if="item.value === defaultForm.recruitPost.type">{{ item.name }}</span>
                                            </template>
                                            <el-divider direction="vertical"/>
                                            <el-tooltip :content="workAddress">
                                                <span class="ellipsis-item">{{ workAddress }}</span>
                                            </el-tooltip>
                                        </template>
                                    </el-form-item>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="招聘渠道">
                                                <span v-if="!defaultForm.recruitChannel">--</span>
                                                <template v-else v-for="item in dictMap['RecruitChannel']" :key="item.value">
                                                    <span v-if="item.value === defaultForm.recruitChannel">{{ item.name }}</span>
                                                </template>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="现居住地" v-if="defaultForm.state != 7">
                                                <span>{{ defaultForm.liveAddress || '--' }}</span>
                                            </el-form-item>
                                            <el-form-item label="入职职位" style="font-weight: bold" v-else>
                                                <span>{{ defaultForm.postName || '--' }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </div>
                        </el-row>
                        <div class="candidate-edu" style="width:50%">
                            <el-form size="small">
                                <el-row align="middle">
                                    <el-col :span="12" :xl="12" :lg="12">
                                        <el-form-item label="毕业院校">
                                            <span>{{ defaultForm.graduatedSchool || '--' }}</span>
                                            <el-divider direction="vertical"/>
                                            <span>{{ defaultForm.major || '--' }}</span>
                                            <el-divider direction="vertical"/>
                                            <span v-if="!defaultForm.eduLevel">--</span>
                                            <template v-else v-for="item in dictMap['EducationLevel']" :key="item.value">
                                                <span v-if="item.value === defaultForm.eduLevel">{{ item.name }}</span>
                                            </template>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12" :xl="12" :lg="12">
                                        <el-form-item label="工作经验">
                                            <span>{{ defaultForm.workExperience ? defaultForm.workExperience + '年' : '--' }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12" :xl="12" :lg="12">
                                        <el-form-item label="最近工作">
                                            <span>{{ defaultForm.lastWorkUnit || '--' }}</span>
                                            <el-divider direction="vertical"/>
                                            <span>{{ defaultForm.lastPosition || '--' }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12" :xl="12" :lg="12">
                                        <el-form-item label="应聘状态">
                                            <span v-if="!defaultForm.jobState">--</span>
                                            <template v-else v-for="item in dictMap['CandidateJobState']" :key="item.value">
                                                <span v-if="item.value === defaultForm.jobState">{{ item.name }}</span>
                                            </template>
                                            <el-divider direction="vertical"/>
                                            <span v-if="defaultForm.arrivedAnytime === '1'">随时到岗</span>
                                            <span v-else>{{ defaultForm.arriveDate ? defaultForm.arriveDate + ' 可到岗' : '--' }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12" :xl="12" :lg="12">
                                        <el-form-item label="招聘负责人">
                                            <span>{{ defaultForm.liableName }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12" :xl="12" :lg="12">
                                        <el-form-item label="期望月薪">
                                            <span v-if="defaultForm.salaryInterview === '0'">
                                                {{ defaultForm.expectSalaryStart || '' }} - {{ defaultForm.expectSalaryEnd || '' }}
                                            </span>
                                            <span v-else>面议</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-row>
                    <div class="edit-options" @click="openEdit">
                        <el-icon>
                            <ele-Edit/>
                        </el-icon>
                    </div>
                </div>
            </el-card>
            <div class="box-row">
                <el-card class="box-card" :body-style="{padding: `10px`}">
                    <template v-if="defaultForm.state != 7">
                        <el-row align="middle">
                            <h4 style="margin-right:10px;">当前状态</h4>
                            <tree-line style="margin-left:-10px; flex:1" :data="candidateStatus" :active="defaultForm.state" :options="cadidateStatusOptions" @getItem="getCandidateStatus($event)" @getBtnOption="getBtnOption"></tree-line>
                        </el-row>
                        <el-row style="margin-top:15px;">
                            <template v-for="item in getOption">
                                <el-button size="small" type="primary" :key="item.id" plain v-if="item.show">{{ item.label }}</el-button>
                            </template>
                            <el-dropdown @command="handleCommand">
                                <el-button type="primary" size="small" style="margin-left:10px" plain>更多
                                    <el-icon class="el-icon--right">
                                        <ele-ArrowDown/>
                                    </el-icon>
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <template v-for="item in getOption">
                                            <el-dropdown-item :key="item.value" v-if="!item.show" :command="item.value">{{ item.label }}</el-dropdown-item>
                                        </template>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-row>
                        <el-divider style="margin: 14px 0"/>
                    </template>
                    <div class="action-col">
                        <h4>应聘记录</h4>
                        <div class="action-list" v-for="item in actionList" :key="item.id"></div>
                        <el-empty v-if="actionList.length < 1" description="暂无应聘记录" style="height:100%"/>
                    </div>
                </el-card>
                <el-card class="box-card" :body-style="{padding: `10px`}" style="margin-right:0;">
                    <el-row>
                        <el-tag size="small" v-for="item in 10" :key="item" style="margin-bottom:5px;margin-right:5px;cursor:pointer;">Tags {{ item }}</el-tag>
                    </el-row>
                    <div class="col-container">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="简历" :name="1"></el-tab-pane>
                            <el-tab-pane label="标准简历" :name="2"></el-tab-pane>
                            <el-tab-pane label="附件" :name="3"></el-tab-pane>
                        </el-tabs>
                        <div class="iframe" v-if="activeName == 1">
                            <iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" ref="iframeDom"></iframe>
                        </div>
                        <div class="iframe" v-if="activeName == 2">
                            <iframe :src="commonUrl" frameborder="0" height="100%" width="100%" ref="iframeDom"></iframe>
                        </div>
                        <div class="file-container" v-if="activeName == 3">
                            <el-form size="small">
                                <el-form-item label="附件信息">
                                    <el-link :underline="false">https://gitee.com/</el-link>
                                </el-form-item>
                                <el-form-item label="附件列表">
                                    <el-row v-for="item in fileList" :key="item.id" align="middle" class="file-row" @click="showFile(item)">
                                        <div class="icon">
                                            <image-files v-if="checkType(item.ext) == 'image'" theme="two-tone" size="16" :fill="['var(--el-color-primary)' ,'#ffffff']" style="margin-top:5px;display:block;"/>
                                            <video-file v-else-if="checkType(item.ext) == 'video'" theme="two-tone" size="16" :fill="['var(--el-color-primary)' ,'#ffffff']" style="margin-top:5px;display:block;"/>
                                            <file-pdf-one v-else-if="checkType(item.ext) == 'pdf'" theme="two-tone" size="16" :fill="['var(--el-color-primary)' ,'#ffffff']" style="margin-top:5px;display:block;"/>
                                            <file-word v-else-if="checkType(item.ext) == 'word'" theme="two-tone" size="16" :fill="['var(--el-color-primary)' ,'#ffffff']" style="margin-top:5px;display:block;"/>
                                            <excel v-else-if="checkType(item.ext) == 'excel'" theme="two-tone" size="16" :fill="['var(--el-color-primary)' ,'#ffffff']" style="margin-top:5px;display:block;"/>
                                            <file-ppt v-else-if="checkType(item.ext) == 'ppt'" theme="two-tone" size="16" :fill="['var(--el-color-primary)' ,'#ffffff']" style="margin-top:5px;display:block;"/>
                                            <i v-else class="fa fa-sticky-note-o"></i>
                                        </div>
                                        <el-tooltip v-if="item.name.length > 22" effect="dark" :content="item.name" placement="bottom">
                                            <el-link class="file-name">{{ checkLength(item.name) }}</el-link>
                                        </el-tooltip>
                                        <el-link class="file-name" v-else>{{ item.name }}</el-link>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <div class="tabs-list">
            <div class="close-btn" @click="close">
                <el-icon color="var(--next-color-white)" size="28px">
                    <ele-CircleClose/>
                </el-icon>
            </div>
        </div>
        <iframe-dialog v-model:dialogVisible="dialogIframe" :url="dialogIframeUrl"></iframe-dialog>
    </el-drawer>
</template>

<script>
import {computed, toRefs, reactive, onMounted, watch} from 'vue'
import TreeLine from '/@/components/treeLine/index.vue'
import IframeDialog from '/@/components/iframe/index.vue'
import {ImageFiles, VideoFile, FilePdfOne, FileWord, Excel, FilePpt} from '@icon-park/vue-next'

export default {
    name: 'CandidateDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        editVisible: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        dictMap: {
            type: Object,
            default() {
                return {}
            }
        },
        stateList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    components: {
        TreeLine,
        ImageFiles,
        VideoFile,
        FilePdfOne,
        FileWord,
        Excel,
        FilePpt,
        IframeDialog
    },
    setup(props, context) {
        const {dialogDrawer} = toRefs(props)
        watch(() => props.stateList, (value) => {
            for (let i = 0; i < state.candidateStatus.common.length; i++) {
                let item = state.candidateStatus.common[i]
                let flag = true
                for (let j = 0; j < value.length; j++) {
                    let stateItem = value[j]
                    if (stateItem.value == item.value && stateItem.visible == 1) {
                        item.label = stateItem.name
                        flag = false
                        break
                    }
                }
                if (flag) {
                    state.candidateStatus.common.splice(i--, 1)
                }
            }
        })
        watch(() => props.defaultForm, value => {
            if (value.recruitPost) {
                let address = ''
                if (value.recruitPost.workLocation) {
                    let arr = value.recruitPost.workLocation.split(',')
                    address = arr[1] + arr[2]
                }
                address += (value.recruitPost.workAddress || '')
                if (address) {
                    state.workAddress = address
                }
            }
        })
        const state = reactive({
            size: '',
            candidateStatus: {
                common: [{
                    label: '待初筛',
                    time: '',
                    value: 0,
                    options: [{
                        label: '安排初筛',
                        value: 1,
                        show: true
                    }, {
                        label: '安排面试',
                        value: 2,
                        show: true
                    }, {
                        label: '淘汰',
                        value: -1,
                        show: true
                    }, {
                        label: '转入备用人才库',
                        value: -2,
                        show: true
                    }, {
                        label: '记录笔试结果',
                        value: 3,
                        show: false
                    }, {
                        label: 'offer前沟通',
                        value: 5,
                        show: false
                    }, {
                        label: '新建offer',
                        value: 4,
                        show: false
                    }, {
                        label: '给候选人发offer',
                        value: 6,
                        show: false
                    }, {
                        label: '确认入职',
                        value: 7,
                        show: false
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '初筛通过',
                    time: '',
                    value: 1,
                    options: [{
                        label: '安排面试',
                        value: 2,
                        show: true
                    }, {
                        label: '安排初筛',
                        value: 2,
                        show: true
                    }, {
                        label: '淘汰',
                        value: -1,
                        show: true
                    }, {
                        label: '转入备用人才库',
                        value: -2,
                        show: true
                    }, {
                        label: '记录笔试结果',
                        value: 3,
                        show: false
                    }, {
                        label: 'offer前沟通',
                        value: 5,
                        show: false
                    }, {
                        label: '新建offer',
                        value: 4,
                        show: false
                    }, {
                        label: '给候选人发offer',
                        value: 6,
                        show: false
                    }, {
                        label: '确认入职',
                        value: 7,
                        show: false
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '已安排面试',
                    time: '',
                    value: 2,
                    options: [{
                        label: '安排面试',
                        value: 2,
                        show: true
                    }, {
                        label: '淘汰',
                        value: -1,
                        show: true
                    }, {
                        label: '转入备用人才库',
                        value: -2,
                        show: true
                    }, {
                        label: '记录笔试结果',
                        value: 3,
                        show: false
                    }, {
                        label: 'offer前沟通',
                        value: 5,
                        show: false
                    }, {
                        label: '新建offer',
                        value: 4,
                        show: false
                    }, {
                        label: '给候选人发offer',
                        value: 6,
                        show: false
                    }, {
                        label: '确认入职',
                        value: 7,
                        show: false
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '已面试',
                    time: '',
                    value: 3,
                    options: [{
                        label: '安排面试',
                        value: 2,
                        show: true
                    }, {
                        label: '淘汰',
                        value: -1,
                        show: true
                    }, {
                        label: '转入备用人才库',
                        value: -2,
                        show: true
                    }, {
                        label: '记录笔试结果',
                        value: 3,
                        show: false
                    }, {
                        label: 'offer前沟通',
                        value: 5,
                        show: false
                    }, {
                        label: '新建offer',
                        value: 4,
                        show: false
                    }, {
                        label: '给候选人发offer',
                        value: 6,
                        show: false
                    }, {
                        label: '确认入职',
                        value: 7,
                        show: false
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '面试通过',
                    time: '',
                    value: 4,
                    options: [{
                        label: '安排面试',
                        value: 2,
                        show: true
                    }, {
                        label: 'offer前沟通',
                        value: 5,
                        show: true
                    }, {
                        label: '新建offer',
                        value: 4,
                        show: true
                    }, {
                        label: '给候选人发offer',
                        value: 6,
                        show: true
                    }, {
                        label: '淘汰',
                        value: -1,
                        show: false
                    }, {
                        label: '转入备用人才库',
                        value: -2,
                        show: false
                    }, {
                        label: '记录笔试结果',
                        value: 3,
                        show: false
                    }, {
                        label: '确认入职',
                        value: 6,
                        show: true
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '已发offer',
                    time: '',
                    value: 5,
                    options: [{
                        label: '确认入职',
                        value: 6,
                        show: true
                    }, {
                        label: '放弃录用',
                        value: 9,
                        show: true
                    }, {
                        label: '安排面试',
                        value: 2,
                        show: false
                    }, {
                        label: '记录笔试结果',
                        value: 3,
                        show: false
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '待入职',
                    time: '',
                    value: 6,
                    options: [{
                        label: '确认入职',
                        value: 6,
                        show: true
                    }, {
                        label: '放弃录用',
                        value: 9,
                        show: true
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '已淘汰',
                    time: '',
                    value: -1,
                    options: [{
                        label: '转入备用人才库',
                        value: -2,
                        show: true
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }, {
                    label: '转入备用人才库',
                    time: '',
                    value: -2,
                    options: [{
                        label: '淘汰',
                        value: -1,
                        show: true
                    }, {
                        label: '更改应聘职位',
                        value: 8,
                        show: false
                    }, {
                        label: '删除',
                        value: -3,
                        show: false
                    }]
                }]
            },
            cadidateStatusOptions: {
                hide: true,
                lastId: null,
                hideRex: /^(0|([1-9]\d*))$/,
                moreOptions: false
            },
            activeName: 1,
            iframeUrl: 'http://www.maxphotonics.com/vancheerfile/files/2022/10/20221020102516650.pdf',
            commonUrl: 'https://ambers.amac.org.cn/web//app/static/template/reference.pdf',
            dialogIframe: false,
            dialogIframeUrl: '',
            fileList: [{
                ext: 'jpg',
                name: '图片这里应该一定会有大概至少可能也许或许Maybeprohibitor23个字以上吧.jpg',
                url: 'https://images.pexels.com/photos/13755937/pexels-photo-13755937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
            }, {
                ext: 'mp4',
                name: '视频.mp4',
                url: 'http://ckplayer-video-sample.oss-cn-shanghai.aliyuncs.com/sample-mp4/d0897b4e9ddd9a5.mp4'
            }, {
                ext: 'pdf',
                name: '文件.pdf',
                url: 'https://ambers.amac.org.cn/web//app/static/template/reference.pdf'
            }, {
                ext: 'doc',
                name: '文件.doc',
                url: ''
            }, {
                ext: 'xls',
                name: '文件.xls',
                url: ''
            }, {
                ext: 'ppt',
                name: '文件.ppt',
                url: ''
            }, {
                ext: 'rar',
                name: '文件.rar',
                url: ''
            }],
            actionList: [],
            workAddress: '--'
        })
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const getOption = computed(() => {
            const result = state.candidateStatus.common.find(item => {
                return item.value == props.defaultForm.state
            })
            return result ? result.options : []
        })
        const getSize = () => {
            if (document.body.clientWidth <= 1400) {
                return '1220px'
            } else {
                return '85%'
            }
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const getCandidateStatus = (e) => {
            const last = structuredClone(props.defaultForm.state)
            state.cadidateStatusOptions.lastId = last
            props.defaultForm.state = e.value
        }
        const getBtnOption = e => {
            props.defaultForm.state = e.value
        }
        const handleClick = e => {

        }
        const checkType = computed(() => {
            return type => {
                return getType(type)
            }
        })
        const getType = type => {
            const imageTypes = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'dib']
            const videoTypes = ['mp4', 'mp3', 'avi', '3gp', 'ogg']
            const pdfTypes = ['pdf']
            const wordTypes = ['doc', 'docx']
            const excelTypes = ['xlm', 'xls', 'xlc', 'xlt', 'xlw', 'xlsx', 'xlsm']
            const pptTypes = ['pot', 'pps', 'ppt']
            if (imageTypes.includes(type)) {
                return 'image'
            } else if (videoTypes.includes(type)) {
                return 'video'
            } else if (pdfTypes.includes(type)) {
                return 'pdf'
            } else if (wordTypes.includes(type)) {
                return 'word'
            } else if (excelTypes.includes(type)) {
                return 'excel'
            } else if (pptTypes.includes(type)) {
                return 'ppt'
            } else {
                return ''
            }
        }
        const checkLength = computed(() => {
            return name => {
                if (name.length > 22) {
                    const start = name.substring(0, 10)
                    const end = name.substring(name.length - 6)
                    return start + '...' + end
                }
                return name
            }
        })
        const showFile = e => {
            const type = getType(e.ext)
            if (type == 'image' || type == 'pdf' || type == 'video') {
                state.dialogIframe = true
                state.dialogIframeUrl = e.url
            } else {
                window.open(e.url, '_self');
            }
        }
        const shareCandidate = () => {

        }
        const openEdit = () => {
            context.emit('update:editVisible', true)
        }
        // 更多操作
        const handleCommand = e => {
            console.log(e)
        }
        onMounted(() => {
            state.size = getSize()
            window.onresize = () => {
                state.size = getSize()
            }
        })
        return {
            drawer,
            close,
            getCandidateStatus,
            getBtnOption,
            handleClick,
            checkType,
            checkLength,
            showFile,
            shareCandidate,
            openEdit,
            getOption,
            handleCommand,
            ...toRefs(state)
        }
    }
}
</script>

<style scoped lang="scss">
.candidate-detail {
    padding: 10px;
    background: var(--next-bg-main-color);
    min-height: 100%;

    .left-base {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            border-right: 1px dotted var(--el-border-color);
        }

        :deep(.el-form) {
            flex: 1;
            width: 100%;
        }

        :deep(.el-form-item) {
            margin-bottom: 0;
            margin-right: 10px;
            flex: 1;
            --font-size: 13px;
        }
    }

    .candidate-msg {
        position: relative;

        .edit-options {
            position: absolute;
            left: 5px;
            top: -5px;
            font-size: 18px;
            color: var(--next-color-text-gery);
            cursor: pointer;

            &:hover {
                color: var(--el-color-primary);
            }
        }
    }

    .candidate-msg-container {
        margin-left: 10px;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        justify-content: center;
        position: relative;
        padding-right: 20px;

        .row-item {
            display: flex;
            align-items: center;

            .candidate-name {
                margin-right: 5px;
                font-weight: bold;
                font-size: 15px;
            }

            .fa {
                font-size: 13px;
            }

            .pink {
                color: #f09199;
                font-weight: bold;
            }

            .blue {
                color: #0094c8;
                font-weight: bold;
            }

            color: var(--el-text-color-primary);
        }

        .share-item {
            cursor: pointer;
            background: var(--el-color-primary-light-9);
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px solid var(--el-color-primary);
            font-size: 12px;

            .share-tips {
                color: var(--el-color-primary);
            }
        }
    }

    .candidate-edu {
        padding-left: 15px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        :deep(.el-form-item) {
            margin-bottom: 5px !important;
            margin-right: 10px;
            flex: 1;
            --font-size: 13px;
        }
    }

    .box-row {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        min-height: 83vh;
        width: 100%;
        margin-top: 15px;

        .col-container {
            :deep(.el-tabs__nav-scroll) {
                display: flex;
                justify-content: center;
            }

            .iframe {
                height: 93%;
            }

            :deep(.el-form-item__content) {
                display: block;
            }

            .file-row {
                font-size: 13px;
                display: flex;
                align-items: center;

                .icon {
                    width: 16px;
                    color: var(--el-color-primary);

                    .fa {
                        font-size: 16px;
                        margin-top: 5px;
                    }
                }

                .file-name {
                    margin-left: 5px;
                    font-size: 13px;
                }
            }
        }
    }

    .box-card {
        width: 49.5%;

        :deep(.el-card__body) {
            height: 100%;
            display: flex;
            flex-direction: column;

            .col-container {
                height: 100%;
                flex: 1;
            }
        }

        .action-col {
            min-height: 100%;
        }
    }

    .other-tips {
        margin-right: 5px;
        color: var(--el-text-color-regular);
    }

    .ellipsis-item {
        width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}

.tabs-list {
    position: absolute;
    top: 90px;
    left: -50px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: auto;
    max-height: 100%;

    .close-btn {
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: var(--el-color-primary);
        padding: 5px 0;
        border-radius: 5px 0 0 5px;
    }
}
</style>
<style>
.candidate-detail-drawer {
    position: fixed;
    overflow: unset;
}

.candidate-modal {
    left: unset;
}
</style>
